<template>
    <van-nav-bar title="工序展示" style="border-bottom: black 1px solid;color:black"  left-text="返回" left-arrow @click-left="goback"/>
    <div id="process2"/>
</template>


<script setup>
import axios from "axios";
import {useRouter} from 'vue-router'
const router = useRouter();

var echarts = require('echarts');
import {onMounted, reactive} from "vue";

import { toRefs, defineProps } from 'vue'       //接受消息所用的组件
const props = defineProps({               //定义props变量的属性
    //子组件接收父组件传递过来的值
    info: String,
    data: {
        type: Object,
        default: {}
    }
})
//使用父组件传递过来的值
const info =toRefs(props)                       //接受父组件传递过来的值

import {getProcess} from "@/request/api";

var chartDom
var myChart
var option;
onMounted(()=> {
    getProcess().then((res)=>{
        if(res.code === 200){
            _rawData = res.data;
            myChart.setOption((option = makeOption()));
            initDrag();
        }

    })
    //开始绘图
    draw();
})

function goback(){
    router.go(-1);
}

/* 用jquery发送网络请求
    import $ from 'jquery'
    var ROOT_PATH = 'http://127.0.0.1:8000/media/airport-schedule.json';
    var ROOT_PATH2 = 'http://127.0.0.1:8000/api/CloudForm/Process'
    $.get(ROOT_PATH2, function (rawData) {
        _rawData = rawData;
        // console.log(rawData.parkingApron.data.length)
        myChart.setOption((option = makeOption()));
        initDrag();
    })
*/


const setWidthHeight = reactive({
    width: window.innerWidth,
    height: window.innerHeight*3/4
})
function draw(){
    chartDom = document.getElementById('process2');
    myChart = echarts.init(chartDom,null,setWidthHeight);
    // window.onresize = function () {
    //     myChart.resize();
    // };
    option && myChart.setOption((option = makeOption()));

}
var HEIGHT_RATIO = 0.6;
var DIM_CATEGORY_INDEX = 0;
var DIM_DEVICE_NAME = 1;
var DIM_TIME_ARRIVAL = 2;
var DIM_TIME_DEPARTURE = 3;

var DATA_ZOOM_AUTO_MOVE_THROTTLE = 30;
var DATA_ZOOM_X_INSIDE_INDEX = 1;
var DATA_ZOOM_Y_INSIDE_INDEX = 4;
var DATA_ZOOM_AUTO_MOVE_SPEED = 0.2;
var DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH = 30;
var _draggable;
var _draggingEl;
var _dropShadow;
var _draggingCursorOffset = [0, 0];
var _draggingTimeLength;
var _draggingRecord;
var _dropRecord;
var _cartesianXBounds = [];
var _cartesianYBounds = [];     //y周方向按钮的大小
var _rawData;
var _autoDataZoomAnimator;
function makeOption(){
    return {
        tooltip: {},
        animation: false,
        //工具箱
        toolbox: {

        },
        //标题设置
        title: {
        },
        //拖动卡槽
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'weakFilter',
                height: 20,
                bottom: 10,
                start: 0,
                end: 26,
                handleIcon:
                    'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                showDetail: false
            },
            {
                type: 'inside',
                id: 'insideX',
                xAxisIndex: 0,
                filterMode: 'weakFilter',
                start: 0,
                end: 26,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true
            },
            {
                type: 'slider',     //滑动器
                yAxisIndex: 0,
                zoomLock: true,
                width: 20,          //宽度
                right: 10,          //右边距
                top: 70,            //顶部边距
                bottom: 30,         //底部边距
                start: 0,          //区间的开始
                end: 100,           //区间的结束
                handleSize: 0,
                showDetail: false
            },
            {
                type: 'inside',
                id: 'insideY',

                yAxisIndex: 0,
                start: 95,
                end: 100,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true
            }
        ],
        //图形设置
        grid: {
            show: true,
            top: 35,
            bottom: 35,
            left: 100,
            right: 20,
            backgroundColor: '#fff',
            borderWidth: 0
        },
        xAxis: {
            type: 'time',
            position: 'top',
            splitLine: {
                lineStyle: {
                    color: ['#E9EDFF']
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                lineStyle: {
                    color: '#929ABA'
                }
            },
            axisLabel: {
                color: '#929ABA',
                inside: false,
                align: 'center'
            }
        },
        yAxis: {
            axisTick: { show: false },
            splitLine: { show: false },
            axisLine: { show: false },
            axisLabel: { show: false },
            min: 0,
            max: _rawData.data1.data.length
        },
        series: [
            {
                id: 'flightData',
                type: 'custom',
                renderItem: renderGanttItem,
                dimensions: _rawData.data2.dimensions,
                encode: {
                    x: [DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE],
                    y: DIM_CATEGORY_INDEX,
                    tooltip: [DIM_CATEGORY_INDEX,DIM_DEVICE_NAME, DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE]
                },
                data: _rawData.data2.data
            },
            {
                type: 'custom',
                renderItem: renderAxisLabelItem,
                dimensions: _rawData.data1.dimensions,
                encode: {
                    x: -1,
                    y: 0
                },
                data: _rawData.data1.data.map(function (item, index) {
                    // console.log(item)
                    return [index].concat(item);
                })
            }
        ]
    };
}

function renderGanttItem(params, api) {
    var categoryIndex = api.value(DIM_CATEGORY_INDEX);
    var timeArrival = api.coord([api.value(DIM_TIME_ARRIVAL), categoryIndex]);
    var timeDeparture = api.coord([api.value(DIM_TIME_DEPARTURE), categoryIndex]);
    var coordSys = params.coordSys;
    // console.log('renderGanttItem',params)
    _cartesianXBounds[0] = coordSys.x;
    _cartesianXBounds[1] = coordSys.x + coordSys.width;
    _cartesianYBounds[0] = coordSys.y;
    _cartesianYBounds[1] = coordSys.y + coordSys.height;
    var barLength = timeDeparture[0] - timeArrival[0];
    // Get the heigth corresponds to length 1 on y axis.
    var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
    var x = timeArrival[0];
    var y = timeArrival[1] - barHeight;
    var flightNumber = api.value(4) + '';
    var flightNumberWidth = echarts.format.getTextRect(flightNumber).width;
    var text =
        barLength > flightNumberWidth + 40 && x + barLength >= 180
            ? flightNumber
            : '';
    var rectNormal = clipRectByRect(params, {
        x: x,
        y: y,
        width: barLength,
        height: barHeight
    });
    var rectVIP = clipRectByRect(params, {
        x: x,
        y: y,
        width: barLength / 2,
        height: barHeight
    });
    var rectText = clipRectByRect(params, {
        x: x,
        y: y,
        width: barLength,
        height: barHeight
    });
    return {
        type: 'group',
        children: [
            {
                type: 'rect',
                ignore: !rectNormal,
                shape: rectNormal,
                style: api.style()
            },
            {
                type: 'rect',
                ignore: !rectVIP && !api.value(4),
                shape: rectVIP,
                style: api.style({ fill: '#ddb30b' })
            },
            {
                type: 'rect',
                ignore: !rectText,
                shape: rectText,
                style: api.style({
                    fill: 'transparent',
                    stroke: 'transparent',
                    text: text,
                    textFill: '#fff'
                })
            }
        ]
    };
}
function renderAxisLabelItem(params, api) {
    var y = api.coord([0, api.value(0)])[1];
    if (y < params.coordSys.y + 5) {
        return;
    }
    return {
        type: 'group',
        position: [10, y],
        children: [
            {
                type: 'path',
                shape: {
                    d: 'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z',
                    x: 0,
                    y: -20,
                    width: 90,
                    height: 20,
                    layout: 'cover'
                },
                style: {
                    fill: '#368c6c'
                }
            },
            {
                type: 'text',
                style: {
                    x: 24,
                    y: -3,
                    text: api.value(1),
                    textVerticalAlign: 'bottom',
                    textAlign: 'center',
                    textFill: '#fff'
                }
            },
            {
                type: 'text',
                style: {
                    x: 75,
                    y: -2,
                    textVerticalAlign: 'bottom',
                    textAlign: 'center',
                    text: api.value(2),
                    textFill: '#000'
                }
            }
        ]
    };
}
function clipRectByRect(params, rect) {
    return echarts.graphic.clipRectByRect(rect, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    });
}
// -------------
//  Enable Drag
// -------------
function onDragSwitchClick(model, api, type) {
    _draggable = !_draggable;
    myChart.setOption({
        dataZoom: [
            {
                id: 'insideX',
                disabled: _draggable
            },
            {
                id: 'insideY',
                disabled: _draggable
            }
        ]
    });
    this.model.setIconStatus(type, _draggable ? 'emphasis' : 'normal');
}
function initDrag() {
    _autoDataZoomAnimator = makeAnimator(dispatchDataZoom);
    myChart.on('mousedown', function (param) {
        if (!_draggable || !param || param.seriesIndex == null) {
            return;
        }
        // Drag start
        _draggingRecord = {
            dataIndex: param.dataIndex,
            categoryIndex: param.value[DIM_CATEGORY_INDEX],
            timeArrival: param.value[DIM_TIME_ARRIVAL],
            timeDeparture: param.value[DIM_TIME_DEPARTURE]
        };
        var style = {
            lineWidth: 2,
            fill: 'rgba(255,0,0,0.1)',
            stroke: 'rgba(255,0,0,0.8)',
            lineDash: [6, 3]
        };
        _draggingEl = addOrUpdateBar(_draggingEl, _draggingRecord, style, 100);
        _draggingCursorOffset = [
            _draggingEl.position[0] - param.event.offsetX,
            _draggingEl.position[1] - param.event.offsetY
        ];
        _draggingTimeLength =
            _draggingRecord.timeDeparture - _draggingRecord.timeArrival;
    });
    myChart.getZr().on('mousemove', function (event) {
        if (!_draggingEl) {
            return;
        }
        var cursorX = event.offsetX;
        var cursorY = event.offsetY;
        // Move _draggingEl.
        _draggingEl.attr('position', [
            _draggingCursorOffset[0] + cursorX,
            _draggingCursorOffset[1] + cursorY
        ]);
        prepareDrop();
        autoDataZoomWhenDraggingOutside(cursorX, cursorY);
    });
    myChart.getZr().on('mouseup', function () {
        // Drop
        if (_draggingEl && _dropRecord) {
            updateRawData() &&
            myChart.setOption({
                series: {
                    id: 'flightData',
                    data: _rawData.flight.data
                }
            });
        }
        dragRelease();
    });
    myChart.getZr().on('globalout', dragRelease);
}
function dragRelease() {
    _autoDataZoomAnimator.stop();
    if (_draggingEl) {
        myChart.getZr().remove(_draggingEl);
        _draggingEl = null;
    }
    if (_dropShadow) {
        myChart.getZr().remove(_dropShadow);
        _dropShadow = null;
    }
    _dropRecord = _draggingRecord = null;
}
function addOrUpdateBar(el, itemData, style, z) {
    var pointArrival = myChart.convertToPixel('grid', [
        itemData.timeArrival,
        itemData.categoryIndex
    ]);
    var pointDeparture = myChart.convertToPixel('grid', [
        itemData.timeDeparture,
        itemData.categoryIndex
    ]);
    var barLength = pointDeparture[0] - pointArrival[0];
    var barHeight =
        Math.abs(
            myChart.convertToPixel('grid', [0, 0])[1] -
            myChart.convertToPixel('grid', [0, 1])[1]
        ) * HEIGHT_RATIO;
    if (!el) {
        el = new echarts.graphic.Rect({
            shape: { x: 0, y: 0, width: 0, height: 0 },
            style: style,
            z: z
        });
        myChart.getZr().add(el);
    }
    el.attr({
        shape: { x: 0, y: 0, width: barLength, height: barHeight },
        position: [pointArrival[0], pointArrival[1] - barHeight]
    });
    return el;
}
function prepareDrop() {
    // Check droppable place.
    var xPixel = _draggingEl.shape.x + _draggingEl.position[0];
    var yPixel = _draggingEl.shape.y + _draggingEl.position[1];
    var cursorData = myChart.convertFromPixel('grid', [xPixel, yPixel]);
    if (cursorData) {
        // Make drop shadow and _dropRecord
        _dropRecord = {
            categoryIndex: Math.floor(cursorData[1]),
            timeArrival: cursorData[0],
            timeDeparture: cursorData[0] + _draggingTimeLength,
            deviceName: cursorData[1]
        };
        var style = { fill: 'rgba(0,0,0,0.4)' };
        _dropShadow = addOrUpdateBar(_dropShadow, _dropRecord, style, 99);
    }
}
// This is some business logic, don't care about it.
function updateRawData() {
    var flightData = _rawData.flight.data;
    var movingItem = flightData[_draggingRecord.dataIndex];
    // Check conflict
    for (var i = 0; i < flightData.length; i++) {
        var dataItem = flightData[i];
        if (
            dataItem !== movingItem &&
            _dropRecord.categoryIndex === dataItem[DIM_CATEGORY_INDEX] &&
            _dropRecord.timeArrival < dataItem[DIM_TIME_DEPARTURE] &&
            _dropRecord.timeDeparture > dataItem[DIM_TIME_ARRIVAL]
        ) {
            alert('Conflict! Find a free space to settle the bar!');
            return;
        }
    }
    // No conflict.
    movingItem[DIM_CATEGORY_INDEX] = _dropRecord.categoryIndex;
    movingItem[DIM_DEVICE_NAME] = _dropRecord.deviceName
    movingItem[DIM_TIME_ARRIVAL] = _dropRecord.timeArrival;
    movingItem[DIM_TIME_DEPARTURE] = _dropRecord.timeDeparture;
    return true;
}
function autoDataZoomWhenDraggingOutside(cursorX, cursorY) {
    // When cursor is outside the cartesian and being dragging,
    // auto move the dataZooms.
    var cursorDistX = getCursorCartesianDist(cursorX, _cartesianXBounds);
    var cursorDistY = getCursorCartesianDist(cursorY, _cartesianYBounds);
    if (cursorDistX !== 0 || cursorDistY !== 0) {
        _autoDataZoomAnimator.start({
            cursorDistX: cursorDistX,
            cursorDistY: cursorDistY
        });
    } else {
        _autoDataZoomAnimator.stop();
    }
}
function dispatchDataZoom(params) {
    var option = myChart.getOption();
    var optionInsideX = option.dataZoom[DATA_ZOOM_X_INSIDE_INDEX];
    var optionInsideY = option.dataZoom[DATA_ZOOM_Y_INSIDE_INDEX];
    var batch = [];
    prepareBatch(
        batch,
        'insideX',
        optionInsideX.start,
        optionInsideX.end,
        params.cursorDistX
    );
    prepareBatch(
        batch,
        'insideY',
        optionInsideY.start,
        optionInsideY.end,
        -params.cursorDistY
    );
    batch.length &&
    myChart.dispatchAction({
        type: 'dataZoom',
        batch: batch
    });
    function prepareBatch(batch, id, start, end, cursorDist) {
        if (cursorDist === 0) {
            return;
        }
        var sign = cursorDist / Math.abs(cursorDist);
        var size = end - start;
        var delta = DATA_ZOOM_AUTO_MOVE_SPEED * sign;
        start += delta;
        end += delta;
        if (end > 100) {
            end = 100;
            start = end - size;
        }
        if (start < 0) {
            start = 0;
            end = start + size;
        }
        batch.push({
            dataZoomId: id,
            start: start,
            end: end
        });
    }
}
function getCursorCartesianDist(cursorXY, bounds) {
    var dist0 = cursorXY - (bounds[0] + DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
    var dist1 = cursorXY - (bounds[1] - DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
    return dist0 * dist1 <= 0
        ? 0 // cursor is in cartesian
        : dist0 < 0
            ? dist0 // cursor is at left/top of cartesian
            : dist1; // cursor is at right/bottom of cartesian
}
function makeAnimator(callback) {
    var requestId;
    var callbackParams;
    // Use throttle to prevent from calling dispatchAction frequently.
    callback = echarts.throttle(callback, DATA_ZOOM_AUTO_MOVE_THROTTLE);
    function onFrame() {
        callback(callbackParams);
        requestId = requestAnimationFrame(onFrame);
    }
    return {
        start: function (params) {
            callbackParams = params;
            if (requestId == null) {
                onFrame();
            }
        },
        stop: function () {
            if (requestId != null) {
                cancelAnimationFrame(requestId);
            }
            requestId = callbackParams = null;
        }
    };
}

option && myChart.setOption(option);


</script>

<style scoped>

</style>